<template>
    <div class="changeContainer">
        <div class="changeContent">
            <div class="back" @click="goBack"></div>
            <p class="title">修改地址</p>
            <div class="other"></div>
        </div>
        <van-form>
            <van-field
                class="myField"
                v-model="username"
                name="收货人"
                label="收货人"
                placeholder="填写收货人姓名"
                :rules="[{ required: true, message: '请填写收货人姓名' }]"
            />
            <van-field
                class="myField"
                v-model="phoneNumber"
                type="text"
                name="手机号码"
                label="手机号码"
                placeholder="填写收货人电话"
                :rules="[{ required: true, message: '请填写收货人电话' }]"
            />
            <van-field
                class="myField"
                readonly
                clickable
                name="area"
                :value="value"
                label="地区选择"
                placeholder="点击选择省市区"
                @click="showArea = true"
            />
            <van-popup v-model="showArea" position="bottom">
                <van-area
                    :area-list="areaList"
                    @confirm="onConfirm"
                    @cancel="showArea = false"
                />
            </van-popup>
            <van-field
                class="myField"
                v-model="moreAddress"
                type="text"
                name="详细地址"
                label="详细地址"
                placeholder="街道小区楼栋/乡村名称"
                :rules="[{ required: true, message: '请填写详细地址' }]"
            />
        </van-form>
        <div class="setting">
            <div class="settingContent">
                <div class="tell">
                    <p class="settingTitle">设置默认地址</p>
                    <p class="warning">开启后，下单时默认使用该地址</p>
                </div>
                <van-switch v-model="switchChecked" size="20" inactive-color="rgb(229, 229, 229)" active-color="rgb(250, 72, 102)"/>
            </div>
        </div>
        <div class="addAddressContainer">
            <div class="address">
                <div class="addAddressImg" @click="gotoAddress"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Form,Field,Popup,Area,Switch } from 'vant';
    import { areaList } from '@vant/area-data';
    import axios from 'axios';
    export default {
        name:'changeAddress',
        methods:{
            goBack(){
                this.$router.back()
            },
            gotoAddress(){
                let addressValue=this.value.split('/');
                let ifDefault=0;
                if(this.switchChecked==false){
                    ifDefault=0
                }
                else{
                    ifDefault=1
                }
                axios({
                    method:'post',
                    url:'http://localhost:8080/polycystic/addressBook',
                    headers:{
                        token:localStorage.getItem('jwt')
                    },
                    data:{
                        consignee:this.username,
                        phone:this.phoneNumber,
                        provinceName:addressValue[0],
                        cityName:addressValue[1],
                        districtName:addressValue[2],
                        detail:this.moreAddress,
                        isDefault:ifDefault
                    }
                })
                // let addressValue=this.value.split('/');
                // let addressStr=addressValue[0]+addressValue[1]+addressValue[2]
                // addressStr=addressStr+this.moreAddress
                // this.$bus.$emit('getAddress',{name:this.username,phone:this.phoneNumber,address:addressStr,isCheck:this.switchChecked})
                this.$router.back()
            },
            onConfirm(values) {
                this.value = values
                    .filter((item) => !!item)
                    .map((item) => item.name)
                    .join('/');
                this.showArea = false;
            },
        },
        components:{
            'van-form':Form,
            'van-field':Field,
            'van-popup':Popup,
            'van-area':Area,
            'van-switch':Switch
        },
        data(){
            return{
                username: '',
                phoneNumber: '',
                value: '',
                moreAddress:'',
                showArea: false,
                areaList,
                switchChecked: false,
            }
        },
    }
</script>

<style scoped>
    .changeContainer{
        width: 100vw;
    }
    .changeContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        height: 0.32rem;
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .other{
        width: .32rem;
        height: .72rem;
    }
    .setting{
        margin-top: .2rem;
        width: 100vw;
        background-color: #FFF;
        overflow: hidden;
    }
    .settingContent{
        width: 6.86rem;
        margin: .2rem auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .tell{
        display: flex;
        flex-direction: column;
    }
    .settingTitle{
        font-family: 'PingFangSC-Regular';
        color:#333333;
    }
    .warning{
        font-family: 'PingFangSC-Regular';
        color:#33333370;
        font-size: .24rem;
        margin-top: .1rem;
    }
    .myField span{
        font-family: 'PingFangSC-Regular';
        color:#333333;
    }
    .addAddressContainer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background-color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .address{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }
    .addAddressImg{
        background-image: url(../assets/img/6-icon@2x/6-24addAddress.png);
        width: 6.86rem;
        height: .84rem;
        background-position: center;
        background-size: contain;
        border-radius: .84rem;
    }
</style>